<template>
  <view class="main dispaly-col-center">
    <view class="title-box">
      <view class="title-bg">
        <image  src="/static/icon/title-bg.png" mode="aspectFill"/>
        <view class="title-txt">订单详情</view>
      </view>
    </view>
    <view class="container">
      <view class="user dispaly-just-between">
        <view class="infos dispaly-center">
          <view class="avatar ">
            <image
                src=""
                mode="aspectFill"/>
            <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
          </view>
          <view class="name">刘海柱</view>
        </view>
        <view class="user-id">ID9987</view>
      </view>
      <view class="product dispaly-center">
        <view class="cover-box ">
          <view class="cover-bg">
            <image class="bg" src="/static/icon/order-cover.png" mode="aspectFill"/>
          </view>
          <image
              src=""
              mode="aspectFill" class="cover-img"/>
        </view>
        <view class="desc ">
          <view class="pro-name">代取快递</view>
          <view class="pro-price">9999.00</view>
        </view>
      </view>
      <view class="info">
        <view class="info-item dispaly-center">
          <view class="info-left">QQ</view>
          <view class="info-right dispaly-just-between">
            <view class="info-con">123456789</view>
            <view class="info-btn">
              <image  src="/static/icon/btn.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
        <view class="info-item dispaly-center">
          <view class="info-left">微信</view>
          <view class="info-right dispaly-just-between">
            <view class="info-con">123456789</view>
            <view class="info-btn">
              <image  src="/static/icon/btn.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
        <view class="info-item dispaly-center">
          <view class="info-left" style="border-bottom: none">电话</view>
          <view class="info-right dispaly-just-between" style="border-bottom: none">
            <view class="info-con">123456789</view>
            <view class="info-btn">
              <image  src="/static/icon/btn.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--    <view class="bottom-line">-->
    <!--      <image  src="/static/icon/line.png" mode="aspectFill"/>-->
    <!--    </view>-->
  </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.main {
  margin-top: 30rpx;
  .title-box {
    width: 692rpx;
    height: 78rpx;
    position: relative;
    .title-bg {
      width: 692rpx;
      height: 78rpx;
      image {
        width: 692rpx;
        height: 78rpx;
      }
    }
    .title-txt {
      width: 692rpx;
      height: 78rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 78rpx;
    }
  }
  .container {
    box-sizing: border-box;
    width: 692rpx;
    border-left: 6rpx solid #4e3b0c;
    border-right: 6rpx solid #4e3b0c;
    border-bottom: 6rpx solid #4e3b0c;
    background: #ffd257;
    padding: 23rpx 10rpx 10rpx 10rpx;
    .user {
      .infos {
        .avatar {
          margin-right: 20rpx;
          border: 1rpx solid #FFFFFF;
          border-radius: 50%;
          width: 74rpx;
          height: 74rpx;
          position: relative;
          .q {
            width: 74rpx;
            height: 74rpx;
          }
          image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 74rpx;
            height: 74rpx;
            border-radius: 50%;
          }
        }
        .name {
          font-family: IPix;
          font-size: 26rpx;
          color: #4E3B0C;
        }
      }
      .user-id {
        font-family: IPix;
        font-size: 26rpx;
        color: #4E3B0C;
      }
    }
    .product {
      padding: 15rpx;
      background: #ffbf0f;
      margin-top: 23rpx;
      border: 4rpx solid #54400f;
      .desc {
        height: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .pro-price {
          font-family: IPix;
          font-size: 24rpx;
          color: #000000;
          padding-bottom: 25rpx;
        }
        .pro-name {
          font-family: IPix;
          font-size: 28rpx;
          padding-top: 25rpx;
          color: #000000;
        }
      }
      .cover-box {
        margin-right: 23rpx;
        width: 150rpx;
        height: 150rpx;
        position: relative;
        .cover-bg {
          width: 150rpx;
          height: 150rpx;
          image {
            width: 150rpx;
            height: 150rpx;
          }
        }
        .cover-img {
          position: absolute;
          top: 4rpx;
          left: 4rpx;
          right: 0;
          width: 144rpx;
          height: 144rpx;
        }
      }
    }
    .info {
      border: 4rpx solid #54400f;
      margin-top: 16rpx;
      .info-item {
        .info-left:last-child {
          border-bottom: none ;
        }
        .info-left {
          border-right: 4rpx solid #54400f;
          border-bottom: 4rpx solid #54400f;
          padding-left: 16rpx;
          flex: 2;
          background: #e6bd4e;
          font-family: IPix;
          font-size: 28rpx;
          color: #000000;
          height: 84rpx;
          line-height: 84rpx;
        }
        .info-right {
          border-bottom: 4rpx solid #54400f;
          padding: 0 19rpx;
          flex: 4;
          height: 84rpx;
          background: #ffd257;
          line-height: 84rpx;
          .info-con {
            font-family: IPix;
            font-size: 28rpx;
            color: #000000;
          }
          .info-btn {
            height: 68rpx;
            image {
              width: 78rpx;
              height: 68rpx;
            }
          }
        }
      }
    }
  }
  .bottom-line {
    background: #ffd257;
    image {
      width: 692rpx;
      height: 10rpx;
    }
  }
}
</style>